 <script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { onReachBottom } from '@dcloudio/uni-app'
	import { edit, getPageRecords } from '@/api/psychology/record.js'
	import { useExport } from '../../../hooks/useExport.js'
	import { EXPORT_FILE_URL } from '../../../enum/exportFileUrl.js'


	const showPopup1 = ref(false);
	const littleShowPopup = ref(false);
	let allRecords = ref();
	let record = ref();
	let nowState = ref(0);
	// const studentId = '1710847223617990658';
	// const studentId = 'xh01';
	// 用来存储还没有填写完的预约信息;
	let time = ref('');
	let page = ref(0);
	const currentState = ref(false)
	// 录音播放
	const innerAudioContext = uni.createInnerAudioContext();
	onMounted(() => {
		getAll();
		audioListen()
	});
	// 下拉刷新
	onReachBottom(() => {
		console.log('refresh');
		page.value += 1;
		let item = { 
			"current": page.value,
		}
		getPageRecords(item).then((res) => {
			console.log('res2222:', res);
			for (let i = 0; i < res.data.data.records.length; i++) {
				allRecords.value.push(res.data.data.records[i])
			}
			console.log('333:', res.data.data.records);
			console.log('page:', page.value);
		})
			.catch((error) => {
				console.error('error:', error);
			})
	})

	const getAll = () => {
		let item = {
		}
		getPageRecords(item).then((res) => {
			allRecords.value = res.data.data.records;
			console.log('allRecords:', allRecords.value);
		})
			.catch((error) => {
				console.error('error:', error);
			})
	};

	const open = (state : any, index : any) => {
		record.value = allRecords.value[index];
		nowState.value = state;
		console.log(record.value)
		setMusicUrl()
		showPopup1.value = true;
	}

	const yes = () => {
		littleShowPopup.value = false;
		showPopup1.value = false;
	}

	const cancel = (id : any) => {
		let item = {
			"id": id,
			"consAdvisoryState": -100
		}
		edit(item)
			.then((res) => {
				console.log('res:', res);
				console.log('预约已退回')
				getAll();
				uni.showToast({
					title: '取消预约成功',
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			})
			.catch((error) => {
				console.error('error:', error);
			})

	}

	const setMusicUrl = (isPlay = false) => {
		// innerAudioContext.src = null
		innerAudioContext.pause()
		innerAudioContext.src = "https://sczx-sign.oss-cn-hangzhou.aliyuncs.com/groupActivity/music/1701051989015.mp3"
		if (isPlay) {
			innerAudioContext.play()
		}
	}
	const isPlay = () => {
		if (innerAudioContext.paused) {
			innerAudioContext.play();
		} else {
			innerAudioContext.pause();
		}
	}
	innerAudioContext.onPause(() => {
		console.log('开始暂停');
		currentState.value = false;
	});
	innerAudioContext.onPlay(() => {
		console.log('开始播放');
		currentState.value = true;
	});
	const now = ref('00:00')
	const currentTime = ref(0)
	const max = ref(1)
	const duration = ref('00:00')
	const progress_max = ref(0)
	const time_format = (second) => {
		let m = Math.floor((second / 60) % 60) < 10 ? '0' + Math.floor((second / 60) % 60) : Math.floor((second / 60) % 60);
		let s = Math.floor(second % 60) < 10 ? '0' + Math.floor(second % 60) : Math.floor(second % 60);
		return `${m}:${s}`;
	}
	const audioListen = () => {
		innerAudioContext.onTimeUpdate(() => {
			currentTime.value = innerAudioContext.currentTime;
			now.value = time_format(currentTime.value);
			max.value = innerAudioContext.duration;
			console.log('innerAudioContext.duration', innerAudioContext.duration)
			if (innerAudioContext.duration > 0) {
				duration.value = time_format((innerAudioContext.duration));
				progress_max.value = 100 * (innerAudioContext.currentTime / innerAudioContext.duration);
			}
		});
	}

	const change = (e) => {
		console.log('e')
		currentTime.value = e.detail.value
		innerAudioContext.seek(currentTime.value)
	}
	const getColor = (state : any) => {
		if (state == -1) {
			return 'red-text'
		} else if (state == 1) {
			return 'blue-text'
		} else if (state == 99) {
			return 'green-text'
		} else if (state == 100) {
			return 'gray-text'
		}
	}
	const inputDialog = ref(null)

	const preCancel = (id : any) => {
		uni.showModal({
			title: '提示',
			content: '确定取消本次预约？',
			success: function (res) {
				if (res.confirm) {
					let item = {
						"id": id,
						"consAdvisoryState": -100
					}
					edit(item)
						.then((res) => {
							console.log('res:', res);
							console.log('预约已退回')
							getAll();
							uni.showToast({
								title: '取消预约成功',
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							setTimeout(() => {
								showPopup1.value = false;
							}, 500);
						})
						.catch((error) => {
							console.error('error:', error);
						})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
 </script>


 <template>
<articleTable ref="timer"></articleTable>
 	<Navigator :fixed="true" background-color="#fa973a" status-bar left-icon="back" left-text="返回" title="预约记录">
 	</Navigator>
 	<view @touchend="handleEnd" class='box'>
 		<!-- 搜索框 -->
 		<view style="width: 70%;margin: auto;margin-bottom: 40rpx;margin-top: 20rpx; ">
 			<u-search :clearabled="true" style=" "></u-search>
 		</view>
 		<view style="width: 100%;height:100rpx;background-color: red;">
 			<navigator url="/pages/appointment/record/index">
 				<button type="default">跳转到新页面</button>
 			</navigator>
 		</view>
 		<!-- 没有预约数据时候出现空白页 -->
 		<TnEmpty mode="data" v-if="allRecords==''" />
 		<!-- 预约记录列表 -->
 		<view style="display: flex;flex-wrap: wrap; width: 74%;margin: auto;">
 			<view v-for="(item,index) in allRecords" :key="index"
 				style="border: 1rpx solid gainsboro;width: 45%;border-radius: 50rpx;margin: auto;display: flex;margin-top: 40rpx;color: white;background-color: white;">
 				<view style="width: 100%;">
 					<view
 						style="display: flex;justify-content: space-between;background-color: rgb(255, 194, 71);text-indent: 2rem;border-radius: 50rpx;">
 						<view style="margin-top: 20rpx;margin-bottom: 20rpx;">
 							<h1>{{item?.cnUser?.realName}}</h1>
 						</view>
 						<view v-show="item?.consAdvisoryState == 1 || item?.consAdvisoryState == 99"
 							style="margin-right: 50rpx;text-indent: 0rem;width: 200rpx;margin-top: 20rpx;border-radius: 50rpx;">
 							<button style="border-radius:40rpx ;" @click="preCancel(item?.id)" type="default"
 								class="gui-button gui-bg-orange gui-noborder">
 								<text style="color: white;">取消预约</text>
 							</button></view>

 					</view>
 					<view style="padding: 32rpx;margin-left:40rpx;color: gray;"
 						@click="open(item.consAdvisoryState,index)">
 						<view>预约开始时间：{{item?.reservationStartTime}}</view>
 						<view>预约结束时间：{{item?.reservationEndTime}}</view>
 						预约状态：<text style="font-size: 1.5rem;"
 							:class="getColor(item.consAdvisoryState)">{{item?.consAdvisoryStateStr}}</text>
 					</view>
 				</view>

 			</view>
 			<i v-for="(item,index) of 5" :key="index" style="width: 24%;margin-left: 5px;min-width: 50%;"></i>
 		</view>


 		<!-- 查看详情的弹出框 -->
 		<!-- <TnPopup v-model="showPopup1" :overlay-closeable="false" width="50%" height="70vh" :z-index="20">
 			<view style="display: flex;justify-content: space-between;margin-top: 20rpx;position: relative;">
 				<view class="flex-center" style="flex: 1;">
 					<h1 style="text-align: center;">预约详情</h1>
 				</view>
 				<view class=" absolute w100p flex-end" style="padding-right: 30rpx;box-sizing: border-box;">
 					<u-icon @click="yes" name="close" color="#2979ff" size="28"></u-icon>
 				</view>
 			</view>
 			<view style="padding: 60rpx;overflow: scroll;width: 100%;height: 100%;box-sizing: border-box;">
 				<view class="tn-p-lg" style="overflow: scroll;width: 100%;">
 					<view
 						style="display: flex;flex-direction: column; border:3rpx solid rgb(226, 230, 234);padding:1rem;border-radius: 50rpx;font-size: 1.2rem;margin-bottom: 50rpx;">
 						<view style="padding: 20rpx;">
 							<view style="display: flex;justify-content:flex-start">
 								<view class="mr20">
 									<img :src="record?.cnUser?.avatar"
 										style="width: 100rpx;height: 100rpx;border-radius: 50rpx;" />
 								</view>
 								<view>
 									<view><text style="font-weight: bold;">姓名：</text> {{record?.cnUser?.realName}}
 									</view>
 									<view>如果你有需要，我一直都在</view>
 								</view>
 								<view v-if="nowState == 1 || nowState == 99" style="margin-left: 300rpx;"> <button
 										@click="preCancel(record?.id)" style="width: 200rpx;" type="default"
 										class="gui-button gui-bg-red gui-noborder">
 										<text class="gui-icons gui-color-white gui-button-text;">取消预约</text>
 									</button></view>

 							</view>

 							<view style="margin-top: 30rpx;"><text style="font-weight: bold;">咨询地点：</text>
 								<text v-if="nowState ==  0">{{record?.consRoom?.name}}</text>
 								<text v-else>待定</text>
 							</view>
 							<span style="display: flex; margin-top: 30rpx;margin-bottom: 10rpx;align-items: center;"
 								class="flex">
 								<span style="line-height:35px;font-weight: bold;"> 本次咨询时间： </span>
 								<view v-if="nowState == 0" style="width:310rpx;">
 									<uni-datetime-picker type="date" :clear-icon="false" v-model="time"
 										placeholder="请选择咨询时间" />
 								</view>
 								<text v-else style="width:310rpx;">
 									{{record?.reservationDate}}
 								</text>
 							</span>
 						</view>
 					</view>

 					<hr />

 					<view
 						style="margin-top:30rpx;font-size: 1.2rem;padding: 20rpx;border:3rpx solid rgb(226, 230, 234);border-radius: 50rpx;">
 						<view style="display: flex;align-items: center;">
 							<svg t="1702521895211" class="icon" viewBox="0 0 1024 1024" version="1.1"
 								xmlns="http://www.w3.org/2000/svg" p-id="2766" width="32" height="48">
 								<path
 									d="M512 901.76a352 352 0 1 1 352-352A352.426667 352.426667 0 0 1 512 901.76z m0-640a288 288 0 1 0 288 288A288.213333 288.213333 0 0 0 512 261.76z"
 									fill="#0091FD" p-id="2767"></path>
 								<path
 									d="M809.386667 401.92a31.786667 31.786667 0 0 1-25.6-50.986667 105.173333 105.173333 0 1 0-168.96-125.226666 32.213333 32.213333 0 0 1-44.8 6.613333 31.786667 31.786667 0 0 1-6.613334-44.8 169.173333 169.173333 0 0 1 271.786667 201.6 32.426667 32.426667 0 0 1-25.813333 12.8zM219.093333 401.92a32.213333 32.213333 0 0 1-25.813333-12.8A169.173333 169.173333 0 1 1 465.066667 187.52a32 32 0 1 1-51.413334 38.186667 105.173333 105.173333 0 1 0-168.96 125.226666 32.213333 32.213333 0 0 1-6.613333 44.8 31.573333 31.573333 0 0 1-18.986667 6.186667z"
 									fill="#F7B500" p-id="2768"></path>
 								<path
 									d="M219.093333 401.92a31.573333 31.573333 0 0 0 18.986667-6.186667 32.213333 32.213333 0 0 0 6.613333-44.8 106.666667 106.666667 0 0 1-10.24-17.066666 360.96 360.96 0 0 0-37.333333 59.306666 31.786667 31.786667 0 0 0 21.973333 8.746667zM413.653333 225.706667a32 32 0 0 0 56.96-25.386667 364.586667 364.586667 0 0 0-66.773333 14.506667 96.213333 96.213333 0 0 1 9.813333 10.88z"
 									fill="#006700" p-id="2769"></path>
 								<path
 									d="M490.666667 631.253333a32 32 0 0 1-32-32V426.666667a32 32 0 0 1 64 0v171.946666a32 32 0 0 1-32 32.64z"
 									fill="#F7B500" p-id="2770"></path>
 								<path
 									d="M490.666667 631.253333a32.213333 32.213333 0 0 1-22.613334-9.386666 31.786667 31.786667 0 0 1 0-45.226667l120.32-120.32a32 32 0 0 1 45.226667 45.226667l-120.32 120.32a32.213333 32.213333 0 0 1-22.613333 9.386666z"
 									fill="#F7B500" p-id="2771"></path>
 								<path
 									d="M791.893333 337.28a88.533333 88.533333 0 0 1-8.106666 13.653333 31.786667 31.786667 0 0 0 44.373333 44.8 356.693333 356.693333 0 0 0-36.266667-58.453333zM570.026667 232.32a32.213333 32.213333 0 0 0 44.8-6.613333 74.026667 74.026667 0 0 1 8.533333-9.6 354.56 354.56 0 0 0-65.706667-15.146667 32.213333 32.213333 0 0 0 12.373334 31.36z"
 									fill="#006700" p-id="2772"></path>
 							</svg>
 							<span style="line-height:80rpx;font-weight: bold;color: darkgray;text-indent: 1rem;"> 具体时段：
 							</span>
 							<view style="text-indent: 2rem;">
 								{{record?.reservationStartTime}}--{{record?.reservationEndTime}}
 							</view>
 						</view>
 						<hr style="width: 90%;margin: auto;" />
 						<view style="display: flex;height: 80rpx;align-items: center;">
 							<svg t="1702522237518" class="icon" viewBox="0 0 1024 1024" version="1.1"
 								xmlns="http://www.w3.org/2000/svg" p-id="4848" width="32" height="32">
 								<path
 									d="M687.104 940.032c-30.208 0-52.224-4.096-60.928-6.144-38.912-2.048-91.136-27.648-128.512-49.664-53.248-30.72-112.64-73.728-166.4-120.832-61.44-53.248-115.2-111.616-156.672-168.448-49.152-67.584-80.896-133.632-93.696-196.096-19.968-97.792-9.216-174.08 32.256-226.816 48.64-62.464 120.832-66.048 123.904-66.56h2.048c3.072 0 31.232 1.024 65.024 13.824 46.592 17.92 81.408 50.176 100.352 93.696 14.848 33.792 16.384 65.024 4.608 96.256-9.728 25.6-26.112 46.08-42.496 66.048-14.336 17.408-27.648 34.304-34.816 52.224 0 1.536 0 9.728 11.776 29.696 9.728 16.896 25.6 37.376 45.056 58.88 35.328 39.424 83.456 81.92 127.488 113.664 54.272 38.912 84.48 48.64 94.208 48.128 53.248-2.048 116.736-51.2 135.168-66.048 13.824-11.264 31.232-16.896 49.152-15.872 71.68 4.608 120.32 28.16 144.384 69.12 14.848 25.088 18.944 56.832 12.8 90.624-4.608 24.064-12.8 40.96-13.824 43.008l-0.512 1.536-1.024 1.536c-59.904 94.208-142.336 125.44-200.192 134.656-17.92 2.56-34.816 3.584-49.152 3.584z m-49.152-66.048c1.536 0.512 40.96 9.728 91.136 1.536 65.024-10.752 117.248-46.08 154.624-104.96 6.144-13.824 16.896-49.664 2.048-74.752-16.384-27.648-60.416-36.352-94.72-38.912-2.56 0-4.608 0.512-6.656 2.048-34.816 28.672-103.936 77.312-171.52 80.384h-2.56c-44.544 0-108.544-42.496-154.624-78.336-59.904-46.592-115.712-102.4-148.992-148.992-31.744-44.032-41.984-78.848-31.744-105.984 10.752-27.136 28.672-49.664 44.544-69.632 31.232-38.4 46.592-59.904 29.696-98.816-12.8-28.672-34.816-49.152-66.56-60.928-20.992-8.192-38.4-9.728-43.008-9.728-7.68 0.512-49.664 6.144-77.824 43.52-29.184 38.4-35.84 97.28-19.968 176.128 20.48 100.864 104.448 221.184 229.888 331.264 51.2 44.544 106.496 84.992 156.672 113.664 52.224 30.208 87.04 40.96 102.4 41.472h3.584l3.584 1.024z"
 									fill="#2E77ED" p-id="4849"></path>
 								<path
 									d="M752.64 553.984h-3.072c-16.896-1.536-29.184-16.384-27.648-33.28 5.632-58.88-7.168-105.984-37.376-140.288-52.736-59.392-142.336-62.464-143.36-62.464-16.896-0.512-30.208-14.336-29.696-31.232 0.512-16.896 14.336-30.208 31.232-29.696 4.608 0 117.248 4.096 187.392 82.944 41.984 47.104 59.392 110.08 52.224 186.88-1.024 14.848-14.336 27.136-29.696 27.136z"
 									fill="#FFBB12" p-id="4850"></path>
 								<path
 									d="M913.92 511.488h-3.584c-16.896-2.048-28.672-17.408-26.624-34.304 11.776-95.744-7.68-172.544-57.344-227.84-95.744-106.496-273.408-104.448-274.944-104.448-16.896 0.512-30.72-13.312-31.232-30.208-0.512-16.896 13.312-30.72 30.208-31.232 2.048 0 52.224-1.024 116.736 13.824 37.888 8.704 73.216 20.992 104.448 36.352 39.936 19.456 73.728 44.544 100.864 74.752 62.464 69.12 87.04 162.304 72.704 276.48-2.56 15.36-15.872 26.624-31.232 26.624z"
 									fill="#FFBB12" p-id="4851"></path>
 							</svg>
 							<span
 								style="line-height:80rpx;font-weight: bold;color: darkgray;text-indent: 1rem;">联系方式：</span>
 							<view>{{record?.stuPhone}}</view>
 						</view>
 						<hr style="width: 90%;margin: auto;" />

 						<view v-for="(item,index) in record?.problemList" :key="index" style="margin-top: 40rpx;">
 							<view v-if="item.value">
 								<text style="color: darkgray;font-weight: bold;">问题{{index+1}}-{{item.name}}? </text>
 								<view style="text-indent: 2rem;margin-top: 20rpx">
 									{{item.value}}
 								</view>
 							</view>
 						</view>
 					</view>
 				</view>

 				<view v-if="record?.consAdvisoryImageList[0]"> <span
 						style="line-height:80rpx;font-weight: bold;color: darkgray;">照片：</span>
 					<view v-for="(item,index ) in record?.consAdvisoryImageList"> <img class="wh100 "
 							:src="item.url" />
 					</view>
 				</view>
 				
 				<view>
 					<view class="flex-between gap4 w100p mt10 mb10"
 						style="align-items: center;background-color: antiquewhite;padding: 20rpx;border-radius: 50rpx;">
 						<view>
 							<img :src="'@/../static/img/musicIcon.svg'" style="width: 100rpx;" />
 						</view>
 						<view class=" w100p ">
 							<view style="width: 90%;height: 100rpx">
 								<slider :value="currentTime" :min="0" :max="max" @change="change" />
 							</view>
 							<view class="time">
 								<text>{{ now }} / {{ duration }}</text>
 							</view>
 						</view>
 						<view style="width: 10%;justify-self: flex-end;padding-left: 10rpx;" class="flex">
 							<image v-if="currentState" @click="isPlay" src="@/static/img/groupActivities/pause.png"
 								style="width: 25rpx;height: 25rpx;" mode="aspectFit">
 							</image>
 							<image v-else @click="isPlay" src="@/static/img/groupActivities/play.png" mode="aspectFit"
 								style="width: 25rpx;height: 25rpx;"></image>
 						</view>
 					</view>
 					<text>{{record?.recordText}}</text>


 					<view v-if="record?.consResult">
 						<span style="line-height:80rpx;font-weight: bold;color: darkgray;">辅导结论：</span>
 						<text>{{record?.consResult}}</text>
 					</view>
 					<button v-if="record?.consAdvisoryState ==100" style="width: 40%;" type="default"
 						class="gui-button gui-bg-green gui-noborder"
 						@click="()=> useExport({id:record?.id},EXPORT_FILE_URL.CONS_ADVISORY_PDF)">
 						<text class="gui-icons gui-color-white gui-button-text">下载报告</text>
 					</button>

 					<view style="height: 100rpx;"> </view>
 				</view>
 			</view>
 		</TnPopup> -->
 		<uni-popup ref="inputDialog" type="dialog">
 			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容"
 				@confirm="dialogInputConfirm"></uni-popup-dialog>
 		</uni-popup>
 		<view style="height: 5vh;"></view>
 	</view>

 </template>

 <style>
 	.box {
 		background-color: ghostwhite;
 		height: 100vh;
 	}

 	.time {
 		margin-top: 26upx;
 		margin-right: 20upx;
 		color: #808080;
 		font-size: 28upx;
 		display: flex;

 		image {
 			display: block;
 			width: 30upx;
 			height: 30upx;
 			margin-left: 30upx;
 			margin-top: 5upx;
 		}
 	}

 	.red-text {
 		color: red;
 	}

 	.green-text {
 		color: rgb(59, 211, 4);
 	}

 	.gray-text {
 		color: rgb(185, 185, 185);
 	}

 	.blue-text {
 		color: rgb(65, 205, 255);
 	}

 	.yellow-text {
 		color: rgb(255, 241, 34);
 	}
	
	
	/deep/.custom .gui-primary-text {
		color: white;
	}
 </style>